<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模糊和阴影效果</title>
</head>
<body>
    <!-- 给 svg 图形添加特殊效果，需要使用 filter 来实现， filter: 过滤器， 使用 id 属性来识别过滤器， filter 定义在defs中 -->
    <!-- defs: definitions 的缩写，定义的意思 -->
    <svg width="110" height="110">
        <defs>
            <filter x="0" y="0" id="f1">
                <feGaussianBlur stdDeviation="15"/> <!-- 高斯模糊效果 -->
            </filter>
        </defs>
        <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)"/>
    </svg>
    <br/>

    <svg width="140" height="140">
        <defs>
            <filter x="0" y="0" width="200" height="200" id="f2">
                <!-- in: 阴影图像的来源， SourceAlpha：定义一个黑色的阴影, SourceGraphic: 使用原始图像作为阴影 -->
                <feOffset in="SourceAlpha" dx="20" dy="20"/>
                <feGaussianBlur stdDeviation="10"/>
                <!-- feBlend：混合原始图像 -->
                <feBlend in="SourceGraphic"/>
            </filter>
        </defs>

        <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)"/>
    </svg>
</body>
</html>